<template>
  <div class="app-header">
    <!--  系统Logo  -->

  
    <div class="logo-txt">政企万通-智能问数</div>
    <div class="user-wrap">
      <div class="user_icon">
        <img class="digital-user-logo" src="@/assets/images/common/admin.png" alt="" />
      </div>
      <i class="digital-user">{{ userName }}，您好！</i>
      <el-icon
        class="mt10 hander"
        @click="doLogout"
        style="margin-left: 0.05rem; margin-right: 0.2rem"
      >
        <SwitchButton />
      </el-icon>
    </div>
  </div>
</template>
<script setup lang="ts">
import { userStoreWithOut } from '@/stores/modules/userStore'
import { toRefs } from 'vue'
import { doLogout } from '@/common/plugins/Axios'

// 从缓存中获取用户信息
const userStore = userStoreWithOut()
const { userName } = toRefs(userStore) // 是响应式
</script>
<style scoped lang="scss">
.app-header {
  display: flex;
  align-items: center;
  height: 100%;
}
/*Logo样式*/

.logo-txt {
  font-family: PangMenZhengDao-3, PangMenZhengDao-3;
  font-weight: 600;
  font-size: 30px;
  color: #1a3a5f;
  line-height: 20px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
.user-wrap {
  margin-left: auto;
  display: flex;
  align-items: center;
  .user_icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e2e7f5;
  }
}
/*右侧用户图标样式*/
.digital-user-logo {
   height: 32px;
}

/*右侧用户样式*/
.digital-user {
  margin-top: 0.26rem;
  font-size: 0.14rem;
}
</style>
